<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="100">
          <FormItem label="字体颜色">
            <PnColorPicker size="small" v-model="color" alpha recommend/>
          </FormItem>
          <FormItem label="字体大小">
            <InputNumber size="small" :max="1000" :min="12" v-model="fontSize"></InputNumber> px
          </FormItem>
          <FormItem label="字体阴影颜色">
            <PnColorPicker size="small" v-model="textShadowColor" alpha recommend/>
          </FormItem>
          <FormItem label="字体阴影大小">
            <InputNumber size="small" :max="1000" :min="0" v-model="textShadowBlur"></InputNumber>
          </FormItem>
          <FormItem label="滚动延时">
            <InputNumber size="small" :max="30" :min="1" v-model="duration"></InputNumber>
            <br/>
            <span class="color-red">数值越小，滚动速度越快</span>
          </FormItem>
          <!--<FormItem label="重复数量">
            <InputNumber size="small" :max="10" :min="1" v-model="repeat"></InputNumber>
          </FormItem>
          <FormItem label="暂停">
            <i-switch v-model="paused">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>-->
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="MarqueeComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>

        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'MarqueeCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        duration: 'component.compConfigData.duration',
        repeat: 'component.compConfigData.repeat',
        paused: 'component.compConfigData.paused',
        color: 'component.compConfigData.color',
        fontSize: 'component.compConfigData.fontSize',
        textShadowBlur: 'component.compConfigData.textShadowBlur',
        textShadowColor: 'component.compConfigData.textShadowColor'

      })
    }
  }
</script>

<style scoped>

</style>
